<template>
  <a-row :gutter="10">
    <a-col :md="24" :sm="24" style="margin-bottom: 20px">
      <!-- 表头开始 -->
      <div class="headerBtn">
        <div class="headerBtnLeft">
          <a-button type="primary" icon="plus" @click="addTask">新建模板</a-button>
        </div>
      </div>
      <!-- 表头结束 -->

      <!-- 表格开始 -->
      <a-card :bordered="false">
        <div style="margin-top: 15px">
          <a-table style="height: 500px" size="middle" rowKey="id" :columns="columns" :dataSource="dataSource1"
            :pagination="ipagination" :loading="loading" :rowSelection="{
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange,
            }">

            <!-- 操作中提示框的值 -->
            <span slot="action" slot-scope="text, record">

              <!-- 点击操作修改按钮的提示框开始 -->
              <a>&nbsp;&nbsp;</a>
              <a v-if="record.action.includes('edit')" class="action-btn" @click="editTask">修改</a>
              <a>&nbsp;&nbsp;</a>
              <!-- 点击操作修改按钮的提示框结束 -->

              <!-- 点击操作删除按钮的提示框开始 -->
              <a-popconfirm placement="topRight" ok-text="确定" cancel-text="取消" @confirm="confirm"
                v-if="record.action.includes('del')">
                <template slot="title">
                  <p>你确定要删除这条数据吗?</p>
                </template>
                <a class="action-btn">删除</a>
              </a-popconfirm>
              <!-- 点击操作删除按钮的提示框结束 -->

              <!-- 点击操作完成按钮的提示框开始 -->
              <a>&nbsp;&nbsp;</a>
              <a-popconfirm placement="topRight" ok-text="确定" cancel-text="取消" @confirm="confirm"
                v-if="record.action.includes('edit')">
                <template slot="title">
                  <p>请确定数据传送已完成？</p>
                </template>
                <a class="action-btn">完成</a>
              </a-popconfirm>
              <!-- 点击操作完成按钮的提示框结束 -->

            </span>
            <!-- 操作中提示框的值结束 -->

          </a-table>
        </div>
      </a-card>
      <!-- 表格结束 -->
    </a-col>

    <!-- 弹框开始 -->
    <AddTableTemplate ref="modalForm" @ok="modalFormOk" @formTable="formTable"></AddTableTemplate>
    <!-- 弹框结束 -->

  </a-row>
</template>
<script>
import {
  ListMixin
} from '@/mixins/ListMixin'



import axios from 'axios'

import AddTableTemplate from './AddTableTemplate'

export default {
  name: 'RoleUserList',
  mixins: [ListMixin],
  data() {
    return {
      selectedRowKeys: [],
      // 模拟表头数据
      dataSource1: [],
      // 模拟表格数据
      columns: [],
      // 接收的参数
      formTables: []
    }
  },
  components: {
    AddTableTemplate
  },
  computed: {

  },
  mounted() {
    // 表头数据
    this.templateColumns()
    // 表格数据
    this.templateTabdta()


  },
  methods: {
    // 获取表头数据
    async templateColumns() {
      const result = await axios.get('/mock/templateManagementColumns')
      this.columns = result.data.data
      // console.log(result, '模拟表头数据------------')
    },
    // 获取表格数据
    async templateTabdta() {
      const result = await axios.get('/mock/templateManagementTabdata')
      this.dataSource1 = result.data.data
      // console.log(result, '模拟表格数据------------')
    },

    // 接收子组件传递的数据
    formTable(val) {
      console.log(val, '父组件接收的参数--------------------')
      console.log(this.dataSource1.length, '长度---------------')
      console.log(this.dataSource1, '长度展示---------------')
      this.dataSource1.push(val)
    },


    editTask() {
      this.$refs.editModalForm.edit()
    },

    // 添加弹框
    addTask() {
      this.$nextTick(() => {
        this.$refs.modalForm.add()
      })

      // alert('新建一条数据')

    },

    // 新增或者修改  成功时重新加载列表
    modalFormOk() {
      this.loadData()
    },

    // 重新加载列表
    loadData() {
      // alert('重新加载列表')
    },

    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },

    confirm() { },

    onChangeHandler() { }

  }
}
</script>


<style scoped lang="scss">
@import '@/assets/css/listcommon.scss';

.breadcrumb {
  margin-top: 30px;
  padding: 10px 15px;
  border: 1px solid #eee;
  margin-bottom: 15px;
  _background: #f5f5f5;
  background: url(../../../assets/img/banner1.0.png);
  // background: #aef;
  background-position: top center;
  background-size: cover;

  .icon_box {
    width: 30px;
    height: 30px;
    background: #4bc076;
    border-radius: 5px;
    color: #fff;
    line-height: 30px;

    i {
      color: #fff;
      font-size: 26px;
    }
  }
}

// 表格
.headerBtn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .headerBtnLeft {
    margin: 30px;
  }

  .headerBtnRight {
    display: flex;
    margin-right: 25px;
  }
}

.ant-btn,
.action-btn {
  margin-left: 8px;

  &:first-child {
    margin-left: 0;
  }
}

::v-deep .ant-table .ant-table-body .ant-table-thead .ant-table-selection-column {
  text-align: center !important;
}

::v-deep .ant-table-thead>tr>th .anticon-filter,
.ant-table-thead>tr>th .ant-table-filter-icon {
  left: 60px !important;
}

.breadcrumb {
  padding: 10px 15px;
  border: 1px solid #eee;
  margin-bottom: 15px;
}

.table-page-search-submitButtons .ant-btn {
  border: 1px solid rgb(209, 208, 208) !important;
}

.table-page-search-submitButtons .ant-btn-primary {
  // color: #fff !important;
  color: #1890ff !important;
  background: #1890ff !important;
}

::v-deep .ant-spin-container .ant-pagination.mini .ant-pagination-total-text {
  position: absolute;
  left: 0;
}

.table-page-search-wrapper .header_right {
  justify-content: flex-start;
}

.avator {
  padding: 5px;
  background: #64c4ff;
  border-radius: 50px;
  color: #fff;
}
</style>
